<template>
    <div>
        <!--                      添加课程时选中的cid  修改时新选的cid  @scid要跟子组件传递的变量名@scid匹配 getcid方法名要和methods里的方法名匹配 -->
        <subcate :data='catelist' :cid='course.cid' @scid='getcid'/>
        <van-field v-model="course.name" label='名称'/>
        <van-field v-model="course.description" label='描述'/>
        <van-field v-model="course.tname" label='讲师'/>
        <van-image :src='"http://localhost:5000/static/upload/"+course.pic' width=100 height=100 v-if='course.pic !=""'/>
        
        <van-button @click="picshow=true">删除</van-button>
        <van-button @click="fileshow=true">更换图片</van-button>

        <van-popup v-model="picshow">确定要删除吗?
             <van-button @click="delpic(course.pic)">确定</van-button>
        </van-popup>

        <van-popup v-model="fileshow">确定要更换吗?
              <van-uploader :after-read='changepic'>

              </van-uploader>
        </van-popup>

        <video :src='"http://localhost:5000/static/upload/"+i' controls='controls' v-for="i in videos" width=300 height=200></video>
        <br> 
         <van-button color="linear-gradient(to right, #7232dd, #ffffff)" @click="update" style="width:200px" id="add" >
          修改
        </van-button>
    </div>
</template>

<script>
// 引入子组件
import subcate from './subcate.vue'
    export default {
        //注册子组件
        components:{
            'subcate':subcate
        },
        data(){
            return{
                id:this.$route.query.id,
                course:{'name':''},
                catelist:[],
                videos:[],
                picshow:false,
                fileshow:false

            }
        },
        methods:{
            //获取所有课程信息
            getcourse(){
                this.$axios.get('getcourse?id='+this.id)
                .then(res=>{
                    this.course=res.data.course
                    //把视频列表转换成json
                     this.videos = JSON.parse(res.data.course['vedios'])
                    console.log(this.videos)
                })
            },
             // 获取分类信息
            getcatelist(){
                this.$axios.get('cateM')
                .then(res=>{
                    this.catelist=res.data.list
                })
            },
            //获取修改时新选的cid 
            getcid(cid){ //cid随便定义的形参
            this.course.cid=cid
                alert(cid)
            },
            update(){
                console.log(this.course)
            },
            //删除图片
            delpic(name){
                this.$axios.delete('deleteFiles?name='+name)
                .then(res=>{
                    //回来操作，如果是图片把pic设置为'',如果是视频从列表中移除单个
                    this.picshow=false
                    this.course.pic=''

                })
            },
            //更换图片 file是新加的图片
            changepic(file){
                //判断看以前的有没有图片，如果有先删除再上传
                if(this.course.pic !=''){
                    this.delpic(this.course.pic)
                }
                // 封装一个新的新的formdata
                let data = new FormData()
                data.append('file',file.file) //把刚传的文件添加进去
                this.$axios.post('upload',data)
                .then(res=>{
                    //更新course.pic
                    this.course.pic=res.data.pic
                    //让框消失
                    this.fileshow=false
                })
            },
          

        },
        mounted(){
            this.getcourse()
            this.getcatelist()
        },
    }
</script>

<style scoped>

</style>